<template>
    <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :page-sizes="[6,8,10, 20, 30,40, 50]"
                       :page-size="page.size"
                       :current-page="page.current" layout="sizes, prev, pager, next, jumper, ->, total, slot"
                       :total="page.total">
        </el-pagination>
    </div>
</template>
<script>
  export default {
    name: 'common-page',
    props: {
      value: {
        type: Object,
        required: true
      }
    },
    watch: {
      'value.total':function () {
        // this.page.current = this.value.current
        console.log('this.value',this.value)
        this.page = this.value
      },
      'value.size':function () {
        // this.page.size = this.value.size
        this.page = this.value
      },
    },
    created () {
      this.page.current = this.value.current
      this.page.size = this.value.size
      this.page.total = this.value.total
    },
    data () {
      return {
        page: {
          current: 1,
          size: 10,
          total: 1,
        }
      }
    },
    methods: {
      handleSizeChange (val) {
        this.page.size = val
        this.$emit('input', this.page)
        this.$emit('change')
      },
      handleCurrentChange (val) {
        this.page.current = val
        this.$emit('input', this.page)
        this.$emit('change')
      }
    }
  }
</script>
